import box from '../../static/images/Login1.png'
import bg from '../../static/images/login2.jpg'
import user1 from '../../static/images/user1.png'
import pwd from '../../static/images/pwd.png'
import { Input, Checkbox, Radio, Button } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import "./Login.scss";
import http from '../../utils/http'
const Login = () => {
  const navigate = useNavigate()
  const [value, setValue] = useState(1);
  const [value1, setValue1] = useState('');
  const [value3, setValue3] = useState('');
  const [remember, setremember] = useState('');
  const bgstyle = {
    height: '100%',
    width: '100%',
    backgroundImage: "url(" + bg + ")",
    backgroundSize: "100%",
  }
  const boxstyle = {
    height: '500px',
    width: '400px',
    backgroundSize: "100% 100%",
    backgroundImage: "url(" + box + ")",
  }
  const onChange = (e) => {
    setremember(e.target.checked)
    console.log(`checked = ${e.target.checked}`);
  }
  const Change2 = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const change1 = (e) => {
    setValue1(e.target.value)
  }
  const change3 = (e) => {
    setValue3(e.target.value)
  }
  const enter = () => {

    console.log(value, value1, value3, remember)
    http({
      url: '/index/login',
      params: {
        username: value1,
        password: value3
      },
      method: 'post'
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        sessionStorage.setItem('name', res.data.name)
        sessionStorage.setItem('id', res.data.id)
        navigate('/home')
        // sessionStorage.setItem('table', JSON.stringify(arr));
      }
    })
  }
  return <div className="login" style={bgstyle}>
    <div className='tit'>智慧园区管理平台</div>
    <div className='loginbox' style={boxstyle}>
      <div>
        {/* <span className="iconfont">&#xe632;</span> */}
        <img src={user1} alt=""></img>
        <Input placeholder="请输入账号" onChange={change1} bordered={false} />
      </div>
      <div>
        {/* <span className="iconfont">&#xe636;</span> */}
        <img src={pwd} alt=""></img>
        <Input type='password' placeholder="请输入密码" onChange={change3} bordered={false} />
      </div>
      <div className='mytype'>
        <Radio.Group onChange={Change2} value={value}>
          <Radio value={1}>用户</Radio>
          <Radio value={2}>管理员</Radio>
        </Radio.Group>
      </div>
      <div>
        <Checkbox className='check' onChange={onChange}>记住账号名</Checkbox>
      </div>
      <div>
        <Button type="primary" onClick={enter}>登录</Button>
      </div>
    </div>
  </div >;
};

export default Login;
